<template>
  <el-card>
    <el-space
      wrap
      alignment="start"
      direction="vertical"
      :size="20"
    >
      <el-button
        type="primary"
        @click="showUserForm(1)"
      >
        新增用户
      </el-button>
      <div />
    </el-space>
    <el-table
      :data="dataList"
      border
      style="width: 100%"
    >
      <el-table-column
        prop="user_id"
        label="用户ID"
        width="120"
        align="center"
      />
      <el-table-column
        prop="username"
        label="用户名"
        width="120"
        align="center"
      />
      <el-table-column
        prop="nickname"
        label="昵称"
        width="120"
        align="center"
      />
      <el-table-column
        prop="phone"
        label="手机号"
        width="120"
        align="center"
      />
      <el-table-column
        prop="email"
        label="邮件地址"
        width="120"
        align="center"
      />
      <el-table-column
        prop="avatar"
        label="头像"
        width="120"
        align="center"
      >
        <template #default="scope">
          <el-avatar
            shape="square"
            :size="50"
            :src="scope.row.avatar"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="idcard"
        label="身份证号"
        width="120"
        align="center"
      />
      <el-table-column
        prop="sing"
        label="个性签名"
        width="120"
        align="center"
      />
      <el-table-column
        prop="uuid"
        label="uuid"
        width="120"
        align="center"
      />
      <el-table-column
        prop="openid"
        label="openid"
        width="120"
        align="center"
      />
      <el-table-column
        prop="create_time"
        label="创建时间"
        width="160"
        align="center"
      >
        <template #default="scope">
          {{ dateFormat(scope.row.create_time) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="update_time"
        label="更新时间"
        width="160"
        align="center"
      >
        <template #default="scope">
          {{ dateFormat(scope.row.update_time) }}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        fixed="right"
        width="160"
      >
        <template #default="scope">
          <el-button
            text
            type="primary"
            @click="showUserForm(2, scope.row)"
          >
            编辑
          </el-button>
          <el-button
            type="danger"
            text
            @click="delUser(scope.row.userId)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top:20px"
      background
      layout="sizes, prev, pager, next"
      :total="total"
      v-model:current-page="page.pageIndex"
      v-model:page-size="page.pageSize"
      :page-sizes="[6,10,20,50]"
      @current-change="changePage"
      @size-change="changeSize"
    />

    <el-dialog
      v-model="showVisible"
      title="添加用户信息"
      width="500px"
      destroy-on-close
      center
    >
      <el-form
        status-icon
        ref="userFormRef"
        :model="userForm"
        :rules="userFormRules"
        label-width="100"
      >
        <el-form-item
          prop="username"
          label="用户名"
        >
          <el-input
            v-model="userForm.username"
            placeholder="用户名"
            type="text"
          />
        </el-form-item>
        <el-form-item
          prop="phone"
          label="手机号"
        >
          <el-input
            v-model="userForm.phone"
            placeholder="手机号"
            type="number"
          />
        </el-form-item>
        <el-form-item
          prop="avatar"
          label="头像"
        >
          <tf-upload
            :url="userForm.avatar"
            @on-success="(val) => userForm.avatar = val"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showVisible = false">取消</el-button>
          <el-button
            type="primary"
            @click="saveUser(userFormRef)"
          >
            {{ actionType == 1 ? '添加' : '更新' }}
          </el-button>
        </span>
      </template>
    </el-dialog>
  </el-card>
</template>
<script setup lang="ts">
import { getCurrentInstance, ref, reactive, onMounted } from 'vue'
import TfUpload from '@/components/TfUpload/index.vue'
import type { FormInstance } from 'element-plus'
import { getUserList, addUser, updateUser, removeUser } from '@/api/user'
import { dateFormat } from '@/utils/filters'
const { proxy } = getCurrentInstance() as any
const page = reactive({
  pageIndex: 1,
  pageSize: 6
})
const total = ref<number>(0)
const userFormRef = ref()
const dataList = ref<any[]>([])
const showVisible = ref<boolean>(false)
const actionType = ref<number>(1) // 超炒操作类型 1 添加 2 修改
const userForm = reactive<any>({
  userId: null,
  username: '', // 用户名
  phone: '', // 手机号
  avatar: '' // 头像
})
const phoneRegexp = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
const userFormRules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 8, message: '用户名3-8个字符', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: phoneRegexp, message: '手机号格式不正确', trigger: 'blur' }
  ],
  avatar: [
    { required: true, message: '密码不能为空', trigger: 'change' }
  ]
})
const changePage = (index: number): void => {
  page.pageIndex = index
  getList()
}
const changeSize = (size: number): void => {
  page.pageSize = size
  getList()
}
// 获取用户列表
const getList = (): void => {
  getUserList(page).then((res: any) => {
    dataList.value = res.list
    total.value = res.total
  })
}
// 显示编辑用户框
const showUserForm = (type: number, user?: any): void => {
  actionType.value = type
  if (type === 2) {
    Object.keys(user).forEach((key: string) => {
      userForm[key] = user[key]
    })
  }
  showVisible.value = true
}
// 保存用户
const saveUser = async (el: FormInstance): Promise<any> => {
  await el.validate((val: boolean) => {
    if (val) {
      if (actionType.value === 1) {
        addUser(userForm).then((res: any) => {
          console.log('添加成功', res)
          showVisible.value = false
          getList()
          proxy.$message.success('添加成功')
        })
      } else {
        const obj = { ...userForm }
        delete obj.update_time
        delete obj.create_time
        updateUser(obj).then(() => {
          getList()
          showVisible.value = false
        })
      }
    } else {
      return false
    }
  })
}
// 删除用户
const delUser = (userId: string): void => {
  removeUser(userId).then((res: any) => {
    console.log('------' + res)
    getList()
  })
}
onMounted(async () => {
  getList()
})
</script>
<style scoped lang="scss">

</style>
